<template>
  <div class="goods">
    <p class="good-title">SideQuest Store</p>
    <el-row>
      <img class="bg" src="../assets/images/store-bg.png" alt=""/>
      <div class="store-content">
        <el-col v-for="(item, index) in goods" :key="index">
          <el-card  :body-style="{ padding: '0px' }">
            <div class="content">
              <div class="position flex">
                <div @click="handleDetail(item)"><img src="../assets/images/store-btn.png" alt=""></div>
                <div @click="handlePassword(item)"><img src="../assets/images/store-cart.png" alt=""></div>
              </div>
              <div class="store-img">
                <img v-lazy="item.picUrl" class="image" alt=""/>
              </div>
              <div style="padding: 44px 0 0; text-align: left">
                <div class="bottom">
                  <div>{{item.name}}</div>
                  <div v-if="item.name!='FreeTime'">£{{ item.retailPrice }}</div>
                  <div v-else>Min:{{ item.retailPrice }}</div>

                  <!--                <div v-if="item.name!='TopUp'&&item.name!='FreeTime'"><el-button @click="handleAddCart(item)" type="text" class="button">Add to cart</el-button></div>-->
                  <!--                <div v-else-if="item.name=='FreeTime'"><el-button @click="handleAddCart(item)" type="text" class="button">Relationship</el-button></div>-->
                  <!--                <div v-else><el-button @click="handleAddCart(item)" type="text" class="button">TopUp</el-button></div>-->
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
    </el-row>

    <payment v-if="paymentVisible" :paymentData="{goodsList:goodsList,total:total}" :paymentVisible="paymentVisible"
             @handlePayClose="handleClose"></payment>
    <password v-if="passwordVisible" :passwordVisible="passwordVisible"
             @handleClose="handleClose" @handlePayment="handlePayment"></password>
  </div>
</template>

<script>

import {mapState} from "vuex";
import payment from '../components/payment'
import password from '../components/password'
export default {
  name: "store",
  props:{
    goods:{
      type:Array,
      defaulted:[]
    },
    cateName:{
      type:String,
      defaulted:''
    }
  },
  components:{payment,password},
  data(){
    return{
      good:'',
      paymentVisible:false,
      passwordVisible:false,
      goodsList:'',
      total:''
    }
  },
  computed: {
    ...mapState({typeStatus:state => state.comData.typeStatus})
  },
  methods:{
    handlePassword(data){
      data.num = 1
      delete data.specifications
      this.goodsList = [data]
      this.total = data.retailPrice
      this.passwordVisible = true
    },
    handlePayment() {
      this.passwordVisible = false
      this.paymentVisible = true
    },

    handleDetail(data){
      this.$emit('handleStoreDetail',data)
    },

    /**
     * 关闭支付弹窗
     */
    handleClose() {
      this.paymentVisible = false
      this.passwordVisible = false
    },
  }
}
</script>

<style scoped lang="scss">
.goods{
  width: calc(100% - 60px);
  height: 100%;
  padding: 44px 0 22px 60px;
  .good-title{
    font-size: 50px;
    color: #ffffff;
    text-align: left;
    padding-bottom: 32px;
    padding-top: 30px;
  }
  ::v-deep .el-row{
    height: calc(100% - 17vh);
    margin: 0 84px;
    position: relative;
    overflow: hidden;
    .bg{
      width: 100%;
    }
  }
  .store-content{
    position: absolute;
    top: 14.44vh;
    left: 6%;
    overflow: auto;
    width: calc(100% + 17px);
    height: calc(100% - 14.44vh);
  }
  ::v-deep .el-col{
    max-width: 22.58vw;
    padding: 37px!important;
    position: relative;
    margin: 0 1.3vw 2.55vw;
    text-align: center;
    background: #ffffff;
    border-radius: 40px;
    overflow: hidden;
    .store-img{
      width: 12.39vw;
      height: 12.39vw;
      margin: 0 auto;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .image {
      width: 12.39vw;
    }

    .el-card.is-always-shadow{
      box-shadow: none;
    }
    .el-card{
      background: none;
      border: none;
      height: 100%;
      .el-card__body{
        position: relative;
        .content{
          width: 100%;
        }
        .flex{
          display: flex;
          justify-content: space-between;
        }
        .position{
          width: 100%;
          background: #ffffff;
          height: 50px;
          margin-bottom: 26px;
          div,p{
            width: 46px;
            height: 46px;
            img{
              width: 100%;
            }
          }
        }
        .bottom{
          line-height: 33px;
          width: calc(100% - 40px);
          padding: 0 20px;
          div{
            text-align: center;
            color: #333333;
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
          }
        }

      }
    }
  }
}
</style>
